<script setup lang="ts">
import { computed, ref } from "vue";
import { ReNormalCountTo } from "@/components/ReCountTo";
import { pieChart } from "./components/chart";
import { chartData } from "./datas";

defineOptions({
  name: "Welcome"
});

const siftValue = ref([1, 2, 3]);
const siftOptions = ref([
  { vlaue: 1, label: "XXX民政局" },
  { vlaue: 2, label: "XXX基金会" },
  { vlaue: 3, label: "XXX社会组织" },
  { vlaue: 4, label: "XXX公司" },
  { vlaue: 5, label: "XXX公益基金组织" }
]);
let year = new Date().getFullYear();
let month = new Date().getMonth() + 1;
const datePickerValue = ref<[Date, Date]>([
  new Date(year, month - 1),
  new Date(year, month, 0)
]);

const segArr = computed(() => {
  return siftOptions.value.filter(item => siftValue.value.includes(item.vlaue));
});
const shortcuts = [
  {
    text: "本月",
    value: () => {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      return [new Date(year, month - 1), new Date(year, month, 0)];
    }
  },
  {
    text: "近3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  },
  {
    text: "近6个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
      return [start, end];
    }
  },
  {
    text: "本年度",
    value: () => {
      let year = new Date().getFullYear();
      return [new Date(year, 0), new Date(year, 12, 0)];
    }
  }
];
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import piePrj from "./piePrj.vue";
const radio = ref("wait");
const array1 = new Array(5).fill({
  title: "XXX公益组织",
  name: "杭州青青草公益服务中心 ",
  reag: "浙江省",
  proNumAr: [
    "项目编号：1020240303001",
    "发布日期：2024-03-03",
    "发布单位：浙江省XXXX单位"
  ],
  con: "为培育发展社会组织，充分引导社会组织在助力经济发展、推进乡村振兴、促进稳岗就业、提供“一老一小”服务、参与第三次分配等工作中发挥积极作用，根据……",
  tag: ["公益创投", "亚运", "为老服务", "社区"],
  type: "进行中"
});
const array2 = new Array(5).fill({
  title: "XXX公益组织",
  name: "杭州青青草公益服务中心 ",
  reag: "浙江省",
  proNumAr: [
    "项目编号：1020240303001",
    "发布日期：2024-03-03",
    "发布单位：浙江省XXXX单位"
  ],
  con: "为培育发展社会组织，充分引导社会组织在助力经济发展、推进乡村振兴、促进稳岗就业、提供“一老一小”服务、参与第三次分配等工作中发挥积极作用，根据……",
  tag: ["公益创投", "亚运", "为老服务", "社区"],
  type: "完成"
});
const list = [...array1, ...array2];
</script>

<template>
  <div>
    <el-card class="line-card" shadow="never">
      <el-row>
        <el-col :span="12">
          客户筛选
          <el-select
            style="width: 390px"
            v-model="siftValue"
            placeholder="请选择客户筛选"
            multiple
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="3"
          >
            <el-option
              v-for="item in siftOptions"
              :label="item.label"
              :value="item.vlaue"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12" class="flexcolumn">
          <el-date-picker
            v-model="datePickerValue"
            type="daterange"
            :shortcuts="shortcuts"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
      </el-row>
    </el-card>
    <div class="mt-[20px]">
      <el-row :gutter="24" justify="space-around">
        <el-col
          v-for="(item, index) in chartData"
          :key="index"
          class="mb-[18px]"
          :span="8"
        >
          <el-card class="line-card" shadow="never">
            <div class="flex justify-between">
              <span class="text-md font-medium">
                {{ item.name }}
              </span>
              <div
                class="w-8 h-8 flex justify-center items-center rounded-md"
                :style="{
                  backgroundColor: item.bgColor
                }"
              >
                <IconifyIconOffline
                  :icon="item.icon"
                  :color="item.color"
                  width="18"
                />
              </div>
            </div>
            <div class="flex justify-between items-start">
              <div class="w-1/2 h-[60px] flex flex-col justify-around">
                <p
                  v-for="(chinditem, chindIndex) in item.data"
                  :class="chindIndex == 0 ? 'mt-[20px]' : 'mt-[10px]'"
                >
                  {{ chinditem.name }}
                  <ReNormalCountTo
                    :duration="item.duration"
                    :fontSize="'1em'"
                    :startVal="100"
                    :endVal="chinditem.value"
                  />
                </p>
              </div>

              <pieChart :data-arr="item.data" v-if="!item.pieshow" />
              <div class="h-[100px] h-[100px]" v-else></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="24" justify="space-around">
      <el-col :span="12">
        <el-card
          class="line-card"
          shadow="never"
          :body-style="{ padding: '0 10px 20px' }"
        >
          <template #header> 项目总览 </template>
          <Segmented :options="segArr" />
          <piePrj
            title="项目数"
            :data-arr="[
              {
                name: '按时完成',
                value: 30
              },
              {
                name: '超时完成',
                value: 3
              },
              {
                name: '待处理',
                value: 7
              }
            ]"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          class="line-card"
          shadow="never"
          :body-style="{ padding: '0 10px 20px' }"
        >
          <template #header> 产出情况 </template>
          <Segmented :options="segArr" />
          <piePrj
            title="任务数"
            :data-arr="[
              {
                name: '已完成',
                value: 340
              },
              {
                name: '审批中',
                value: 150
              },
              {
                name: '已关闭',
                value: 10
              }
            ]"
          />
        </el-card>
      </el-col>
    </el-row>
    <div>
      <el-card class="line-card mt-[20px]" shadow="never">
        <el-radio-group v-model="radio">
          <el-radio-button value="wait">全部</el-radio-button>
          <el-radio-button value="progress">进行中</el-radio-button>
          <el-radio-button value="complete">已完成</el-radio-button>
        </el-radio-group>
        <ul>
          <li v-for="item in list" class="flex w-full tableList relative">
            <div class="w-[160px]">
              <div
                class="h-[70px] flex items-center justify-center bg-slate-700 text-white"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="ml-[20px]">
              <h2 class="flex items-center text-[16px]">
                {{ item.name }}
                <el-tag type="warning" class="ml-[20px]">{{
                  item.reag
                }}</el-tag>
              </h2>
              <div class="my-[5px]">
                <el-text
                  size="small"
                  v-for="(chind, chindIndex) in item.proNumAr"
                >
                  {{ chindIndex == 0 ? "" : " |" }}
                  {{ chind }}
                </el-text>
              </div>
              <p class="text-[13px] mb-[10px]">{{ item.con }}</p>
              <el-tag
                type="info"
                v-for="(chind, chindIndex) in item.tag"
                class="mr-[20px]"
                >{{ chind }}</el-tag
              >
            </div>
            <div class="w-[100px] flex justify-end">
              <el-tag :type="item.type == '进行中' ? 'primary' : 'success'">{{
                item.type
              }}</el-tag>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
.flexcolumn {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: wrap;
}
.tableList {
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 10px;
}
</style>
